<template> 
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>发货列表</span>
    </el-card>
    <div class="table-container">
      <el-table ref="deliverOrderTable"
                style="width: 100%;"
                :data="list" border>
        <el-table-column label="订单编号" width="180" align="center">
          <template slot-scope="scope">{{scope.row.orderSn}}</template>
        </el-table-column>
        <el-table-column label="收货人" width="180" align="center">
          <template slot-scope="scope">{{scope.row.receiverName}}</template>
        </el-table-column>
        <el-table-column label="手机号码" width="160" align="center">
          <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
        </el-table-column>
        <!-- <el-table-column label="邮政编码" width="160" align="center">
          <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
        </el-table-column> -->
        <el-table-column label="收货地址" align="center">
          <template slot-scope="scope">{{scope.row | formatAddress}}</template>
        </el-table-column>
        <el-table-column label="配送方式" width="160" align="center">
          <template slot-scope="scope">
            <el-select placeholder="请选择物流公司"
                       v-model="scope.row.deliveryCompany"
                       size="small">
              <el-option v-for="item in companyOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" width="180" align="center">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px;text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {deliveryOrder, getOrderDetail} from '@/api/order'
  const defaultLogisticsCompanies=[
    {
      label:"顺丰快递",
      value:"SF"
    },
    {
      label:"百世快递",
      value:"HTKY"
    },
    {
      label:"中通快递",
      value:"ZTO"
    },
    {
      label:"申通快递",
      value:"STO"
    },
    {
      label:"圆通速递",
      value:"YTO"
    },
    {
      label:"韵达速递",
      value:"YD"
    },
    {
      label:"邮政快递包裹",
      value:"YZPY"
    },
    {
      label:"EMS",
      value:"EMS"
    },
    {
      label:"天天快递",
      value:"HHTT"
    },
    {
      label:"京东快递",
      value:"JD"
    },
    {
      label:"优速快递",
      value:"UC"
    },
    {
      label:"德邦快递",
      value:"DBL"
    },
    {
      label:"宅急送",
      value:"ZJS"
    }
  ]
  export default {
    name: 'deliverOrderList',
    data() {
      return {
        list:[],
        oid: '',
        companyOptions:defaultLogisticsCompanies
      }
    },
    created(){
    //   this.list= this.$route.query.list;
      this.oid = this.$route.query.oid
      if (this.oid) {
          this.getDetail()
      }
    },
    filters: {
      formatAddress(order) {
        let str = order.receiverProvince;
        if (order.receiverCity != null) {
          str += "  " + order.receiverCity;
        }
        str += "  " + order.receiverRegion;
        str += "  " + order.receiverDetailAddress;
        return str;
      }        
    },
    methods:{
      getDetail () {
        getOrderDetail(this.oid).then(response => {
            this.list = [response.data];
        });
      },
      cancel(){
        this.$router.back();
      },
      confirm(){
        this.$confirm('是否要进行发货操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log(this.list[0], 321321)
          deliveryOrder({
              deliveryCompany: this.list[0].deliveryCompany,
              deliverySn: this.list[0].deliverySn,
              orderId: this.list[0].id
          }).then(response=>{
            this.$router.back();
            this.$message({
              type: 'success',
              message: '发货成功!'
            });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发货'
          });
        });
      }
    }
  }
</script>
<style></style>


